<template>
    <div class="replayOrderCont" :style="'min-height: '+docheight+'px'">
        <topcom :topobj="topObj"></topcom>
        <div class="replyForm">
            <van-field
                v-model="replyVal"
                rows="3"
                autosize
                type="textarea"
                maxlength="150"
                placeholder="请输入订单评价..."
                show-word-limit
            />
            <div class="formItem">
                <defUpImg :propImg="[]" @successCropper="getImg" icon="icon-xiangji1"></defUpImg>
            </div>
            <div class="rateBox">
                <van-rate color="#6455d4" v-model="rateNum" allow-half />
            </div>
        </div>
        <div class="ctrlBtn">
          <div class="addBtn" @click="saveFn">立即评价</div>
        </div>
        <toast v-model="showToast" position="middle" width="50%" type="text" :time="1000">{{showText}}</toast>
    </div>
  </template>
  
  <script>
    import topcom from '@/components/topcpm'
    import {Toast } from 'vux'
    import defUpImg from '@/components/public/defUpImg.vue'
    // import { orderEvaluate } from '@/http/userCenter'
    
    export default {
      components: {Toast,topcom,defUpImg},
      data() {
        return {
            showText:'',
            showToast:false,
            topObj:{
                is_bg:true,
                rightVal:'',
                centerVal:'评价订单',
            },
            replyVal:'',
            rateNum:0,
            upImg:[],
        }
      },
      props: {},
      methods:{
        getImg(arr){
            this.upImg =arr
        },
        saveFn(){
            if(!this.replyVal){
                this.showToast = true
                this.showText = '评价内容不能为空'
                return false
            }else if(this.rateNum<=0){
                this.showToast = true
                this.showText = '请选择评分'
                return false
            }else{
                let str= ''
                let arr = []
                for(let i = 0;i<this.upImg.length;i++){
                    arr.push(this.upImg[i].img)
                }
                str = arr.join(',')
                let data ={
                    order_id:this.$route.query.id,
                    evaluate_content:this.replyVal,
                    evaluate_img:str,
                    star_rating:this.rateNum,
                }
                orderEvaluate(data).then((res)=>{
                    this.showToast = true
                    if(res.data.code==1){
                        this.showText = '评价成功'
                        setTimeout(() => {
                            this.$router.back()
                        }, 1000);
                    }else{
                        this.showText = res.data.msg
                    }
                }).catch(()=>{
                    this.showToast = true
                    this.showText = '网络请求超时'
                })
            }
        },
      },
      mounted(){
      },
      
      created() {
      },
    }
  </script>
  
  <style scoped lang="less">
  .replayOrderCont{
    width: 100%;
    background-color: #f7f8fa;
    box-sizing: border-box;
    .replyForm{
        width: 100%;
        box-sizing: border-box;
        background-color: #fff;
        margin: 1rem 0;
        padding: 1rem 0;
        .formItem{
            padding: 0.25rem 0;
            width: 100%;
            padding: 0 4%;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            padding-top: 1rem;
            position: relative;
            background-color: #fff;
            .formName{
                width: 4rem;
                font-size: 0.7rem;
                color: #646566;
                margin-right: 0.75rem;
                box-sizing: border-box;
            }
            
        }
        .rateBox{
            padding: 0.75rem 4%;
            box-sizing: border-box;
        }
    }
    .ctrlBtn{
      width: 100%;
      background-color: #fff;
      padding: 0.5rem 4%;
      box-sizing: border-box;
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      .addBtn{
        flex: 1;
        width: 2rem;
        line-height: 2.2rem;
        letter-spacing: 0.1rem;
        text-align: center;
        font-size: 0.7rem;
        background-color: #6455d4;
        color: white;
        border-radius: 1.1rem;
      }
    }
  }
  </style>
  